<template>
  <div>
    <div class="flex-start tbox">
      <span class="t1">请输入商品关键字:</span>
      <el-input placeholder="请输入搜索的关键字" prefix-icon="el-icon-search" v-model="content" class="w" @input="inputgoods">
      </el-input>
      <div style="margin-left: 25px" @click="searchgoods">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>

      <!-- 选择类型框 -->
      <div style="margin-left: 100px">
        <span class="t1">请选择商品类型:</span>
        <el-select v-model="value" clearable placeholder="请选择" style="width: 150px" @clear="clear" @change="xialachange">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div style="margin-left: 25px" @click="search1">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>

      <div style="margin-left: 65px" @click="add">
        <el-button type="primary" icon="el-icon-attract">增加商品</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <el-table :data="realdata" border style="width: 100vw" :row-style="rowStyle" :header-cell-style="tableHeaderColor">
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column prop="iid" align="center" label="商品iid" width="130">
      </el-table-column>

      <el-table-column label="商品图片" align="center" width="100">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="hover">
            <!-- 预览时的图片 -->
            <img :src="scope.row.img" alt="" style="width: 150px; height: 150px" />
            <!-- 真正的图片 -->
            <img slot="reference" :src="scope.row.img" style="width: 60px; height: 60px" />
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="标题" width="450">
      </el-table-column>

      <el-table-column prop="orgPrice" align="center" label="旧价格" width="120">
      </el-table-column>

      <el-table-column prop="price" align="center" label="价格" width="120">
      </el-table-column>

      <el-table-column prop="cfav" align="center" label="收藏" width="120">
      </el-table-column>

      <el-table-column prop="sale" align="center" label="销量" width="120">
      </el-table-column>

      <el-table-column align="center" label="类型" width="120">
        <template slot-scope="scope">
          <el-button size="mini" :type="scope.row.lxtype" plain>{{
            scope.row.leixing
          }}</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" align="center" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码数 -->
    <div class="flex-center" style="margin-top: 10px">
      <el-pagination background layout="total,prev, pager, next" :total="datalength" :page-size="pagesSize"
        @current-change="changesize">
      </el-pagination>
    </div>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>是否确认删除该商品id为{{ iid }}?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="suredelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑菜单 ----------------------------------->
    <el-dialog title="商品编辑" :visible.sync="openbianji" width="33%">
      <!-- 编辑的区域 -->
      <div class="flex-between">
        <div style="margin-left: 30px">
          <span class="t1">商品id:</span>
          <el-input prefix-icon="el-icon-star-off" v-model="bjdetail.iid" style="width: 150px" :disabled="true" />
        </div>
        <div>
          <span class="t1">商品标题:</span>
          <el-input placeholder="请输入商品标题" prefix-icon="el-icon-tickets" v-model="bjdetail.title" style="width: 180px" />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div>
          <span class="t1">商品旧价格:</span>
          <el-input placeholder="请输入商品旧价格" prefix-icon="el-icon-star-off" v-model="bjdetail.orgPrice"
            style="width: 170px" />
        </div>
        <div>
          <span class="t1">商品价格:</span>
          <el-input placeholder="请输入商品价格" prefix-icon="el-icon-tickets" v-model="bjdetail.price" style="width: 180px" />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div style="margin-left: 14px">
          <span class="t1">商品收藏:</span>
          <el-input placeholder="请输入商品收藏" prefix-icon="el-icon-star-off" v-model="bjdetail.cfav" style="width: 170px" />
        </div>
        <div>
          <span class="t1">商品销量:</span>
          <el-input placeholder="请输入商品销量" prefix-icon="el-icon-tickets" v-model="bjdetail.sale" style="width: 180px" />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div style="margin-left: 15px">
          <span class="t1">商品类型:</span>
          <el-select v-model="bjdetail.leixing" placeholder="请选择商品类型" style="width: 150px" @change="bjchange">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="openbianji = false">取 消</el-button>
        <el-button type="primary" @click="surebianji">确 定</el-button>
      </span>
      <!-- 编辑结束 -->
    </el-dialog>

    <!-- 弹窗组件 -->
    <goodstan ref="tan" @adddetail1="adddetail"> </goodstan>
  </div>
</template>

<script type="module">
import { getHomeGoods } from "../../network/home.js";
import { randArr } from "../../common/common.js";
import goodstan from "../../cpmponent/goodstan.vue";
import { json } from "body-parser";
export default {
  components: { goodstan },

  created() {
    this.tableData = [];
    // this.getdata("pop", 1);
    // this.getdata("sell", 1);
    // this.getdata("new", 1);
    this.getdata2();
    let m = {};
    m.path = this.$route.path;
    m.name = this.$route.name;
    m.type = "";
    this.$store.commit("addrouterlist", m);
  },
  comments: {
    goodstan,
  },
  data() {
    return {
      tableData: [],
      pagesNum: 1,
      pagesSize: 7,
      content: "",
      options: [
        {
          value: "流行",
          label: "流行",
        },
        {
          value: "新款",
          label: "新款",
        },
        {
          value: "畅销",
          label: "畅销",
        },
      ],
      value: "",
      dialogVisible: false,
      openbianji: false,
      zindex: 0,
      iid: "",
      leixing: "",
      bjdetail: {
        iid: "",
        title: "",
        orgPrice: "",
        price: "",
        cfav: "",
        sale: "",
        leixing: "",
        img: "",
        lxtype: "",
      },
      realdata: [],
    };
  },
  computed: {
    datalength() {
      return this.tableData.length;
    },
  },
  methods: {
    initrealgoods() {
      this.realdata = this.tableData.slice(
        (this.pagesNum - 1) * this.pagesSize,
        this.pagesSize * this.pagesNum - 1
      );
    },
    // 输入关键字
    inputgoods() {
      if (this.content == "") {
        // this.tableData = JSON.parse(window.localStorage.getItem("goodslist"));
        this.getdata2();
        this.initrealgoods();
        this.$message.success("重置成功");
      }
    },
    // 搜索商品
    searchgoods() {
      // this.tableData = JSON.parse(window.localStorage.getItem("goodslist"));
      // this.tableData = this.tableData.filter((item) => {
      //   console.log(item.title.includes(this.content));
      //   return item.title.includes(this.content);
      // });
      var that = this;
      this.$axios
        .post(this.$IP + "/searchgoods", { title: this.content })
        .then((res) => {
          console.log("搜索出来的商品信息", res.data);
          that.tableData = res.data
          that.initrealgoods();
          that.$message.success("搜索成功");
          that.$forceUpdate();
        });
    },
    // 返回的增加商品组件
    adddetail(e) {
      var that = this;
      // e.show = {};
      // e.show.img = e.addimg;
      // this.tableData.splice(0, 0, e);
      this.$axios.post(this.$IP + "addgoods", e).then((res) => {
        console.log("增加商品成功", res.data);
        that.getdata2();
        that.initrealgoods();
        that.$message.success("增加商品成功");
        that.$refs.tan.close();
      });
    },
    // 增加商品
    add() {
      this.$refs.tan.open();
    },
    // 编辑选择框改变的
    bjchange(e) {
      if (e == "pop") {
        this.bjdetail.leixing = "流行";
      }
      if (e == "sell") {
        this.bjdetail.leixing = "畅销";
      }
      if (e == "new") {
        this.bjdetail.leixing = "新款";
      }
    },
    // 商品照片上传成功的回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 编辑成功的回调
    surebianji() {
      var that = this;
      this.openbianji = false;
      // this.tableData[this.zindex] = this.bjdetail;
      this.$axios.post(this.$IP + "/updategoods", this.bjdetail).then((res) => {
        console.log("更新商品成功", res);
        that.$message.success("编辑商品成功");
        that.getdata2();
        that.initrealgoods();
        that.$forceUpdate();
      });
    },
    // 删除开始
    handleDelete(index, row) {
      console.log(index, row);
      this.dialogVisible = true;
      this.zindex = index;
      this.iid = row.iid;
      this.leixing = row.leixing;
    },
    // 确认删除弹窗进行回调
    suredelete() {
      var that = this;
      this.dialogVisible = true;
      // this.tableData.splice(this.zindex, 1);
      this.$axios
        .post(this.$IP + "deletegoods", { iid: this.iid, leixing: this.leixing })
        .then((res) => {
          console.log("删除成功");
          that.getdata2();
          that.initrealgoods();
          that.$message.success("删除商品成功");
          that.dialogVisible = false;
        });
    },
    // 清除选项
    clear() {
      this.value = "";
      // this.tableData = JSON.parse(window.localStorage.getItem("goodslist"));
      this.getdata2();
      this.initrealgoods();
    },
    // 搜索商品类型
    search1() {
      console.log("this", this.value);
      if (this.value == "") {
        this.$message.error("请选择商品类型");
        return;
      }
      // this.tableData = JSON.parse(window.localStorage.getItem("goodslist"));
      // this.tableData = this.tableData.filter((item) => {
      //   return item.leixing == this.value;
      // });
      this.$axios
        .post(this.$IP + "filtergoods", {
          leixing: this.value,
        })
        .then((res) => {
          console.log("过滤的数据", res.data);
          this.tableData = res.data;
          this.initrealgoods();
          this.$message.success("筛选商品类型成功！")
        });
    },
    // 下拉框改变事件
    xialachange(e) {
      this.value = e;
    },
    // 改变页码进行触发事件
    changesize(e) {
      console.log("页码", e);
      this.pagesNum = e;
      this.initrealgoods();
    },
    //设置表格行的样式
    rowStyle({ row, rowIndex }) {
      let styleJson1 = {
        "text-align": "center",
      };
      return styleJson1;
    },
    //设置表头行的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      let styleJson = {
        "text-align": "center",
      };
      return styleJson;
    },
    // 编辑开始
    handleEdit(index, row) {
      console.log(index, row);
      this.openbianji = true;
      this.zindex = index;
      this.bjdetail = row;
    },

    // 请求数据库数据
    getdata2() {
      this.$axios.get(this.$IP + "showallgoods").then((res) => {
        console.log("数据库的数据", res.data);
        this.tableData = res.data;
        this.initrealgoods();
      });
    },

    // 请求网络数据
    async getdata(type, page) {
      let that = this;
      let res = await getHomeGoods(type, page);
      // console.log("商品的数据", res.data.list);
      let list = res.data.list;
      list.forEach((item) => {
        if (type == "pop") {
          item.leixing = "流行";
          item.lxtype = "primary";
        } else if (type == "sell") {
          item.leixing = "畅销";
          item.lxtype = "success";
        } else if (type == "new") {
          item.leixing = "新款";
          item.lxtype = "danger";
        }
      });
      this.tableData = this.tableData.concat(list);
      // 随机打乱数组
      this.tableData = randArr(this.tableData);
      this.initrealgoods();
      window.localStorage.setItem("goodslist", JSON.stringify(this.tableData));
      this.tableData.forEach((item) => {
        let a = {};
        a.iid = item.iid;
        a.img = item.show.img;
        a.orgPrice = item.orgPrice;
        a.price = item.price;
        a.title = item.title;
        a.leixing = item.leixing;
        a.lxtype = item.lxtype;
        a.cfav = item.cfav;
        a.sale = item.sale;
        that.$axios.post(that.$IP + "addgoods", a).then((res) => {
          console.log("addgoods", res.data);
        });
      });
    },
  },
};
</script>

<style scoped>
.tbox {
  margin-bottom: 20px;
}

.w {
  width: 190px;
}

.el-table__cell {
  text-align: center;
}

.t1 {
  padding-right: 10px;
  color: #545c64;
  font-weight: bold;
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 108px;
  height: 108px;
  line-height: 108px;
  text-align: center;
}

.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
</style>